<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-06-11 18:09:29
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-06-12 18:57:27
 * @FilePath: \cip-mobile\src\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 登录页 -->
<script lang="ts" setup>
import { useUserStore } from '@/stores/user';
defineOptions({ name: 'Login' });
const userStore = useUserStore();

const form = ref({
	userName: '',
	userPwd: '',
});

const formRef = shallowRef<FormInstance>();

const { execute, isLoading } = useAsyncState(
	async () => {
		await formRef.value!.validate();
		await userStore.login(form.value.userName, form.value.userPwd);
	},
	null,
	{
		immediate: false,
	},
);
const router = useRouter();
const pwdStorage = ref(false);

const register = () => {
	router.replace({ path: '/login/register' });
};

// watchEffect(() => {
//   debugger;
//   userStore.isLogined && router.replace({ path: '/home' });
// });

// watch([() => form.value.userName, () => form.value.phoneNo], async ([userName, phoneNo]) => {
// 	const { data } = await fireProductFireApiInspectionPersonJobQuerybyPost({ data: { userName, phoneNo } });
// 	console.log(data);
// });

watchEffect(() => {
	if (userStore.isLogined) {
		router.replace({ path: '/home' });
	}
});
</script>

<template>
	<div class="login-page">
		<div flex="1 ~ col justify-center" text="24px #EDF8FF" pl="34px" lh="32px" style="height: 200px">
			<div pb="16px">登录</div>
			<div text="14px">欢迎使用武汉化工园区移动端</div>
		</div>

		<nut-form ref="formRef" label-position="top" p="y-30px" bg="#fff" rd="t-36px">
			<nut-form-item label="账号">
				<nut-input v-model="form.userName" placeholder="请输入账号" type="text"> </nut-input>
			</nut-form-item>
			<nut-form-item label="密码">
				<nut-input v-model="form.userPwd" placeholder="请输入密码" type="password"> </nut-input>
			</nut-form-item>
			<nut-form-item>
				<nut-checkbox v-model="pwdStorage" class="pwdStorage"> 记住密码 </nut-checkbox>
			</nut-form-item>
			<nut-form-item>
				<nut-button block class="login-button" :loading="isLoading" @click="execute"> 登录 </nut-button>
				<!-- <nut-button block class="login-button visitor-login" :loading="isLoading"> 游客登录 </nut-button> -->
			</nut-form-item>
			<nut-form-item>
				<div class="register-button-container">没有账号，<span @click="register">去注册</span></div>
			</nut-form-item>
		</nut-form>
	</div>
</template>

<style scoped lang="scss">
.login-page {
	display: flex;
	flex-direction: column;
	width: 100vw;
	padding-top: 10vh;
	background-image: url('./assets/login-bg.png');
	background-size: 100% 37%;
	background-repeat: no-repeat;

	--nut-cell-color: #000;
	--nut-cell-box-shadow: 0;
	--nut-cell-padding: 15px 40px;
	--nut-cell-after-border-bottom: 0px;
	--nut-form-item-label-font-size: 14px;
	--nut-input-border-bottom: #588bff 1px;
	--nut-checkbox-label-color: #606266;
	--nut-checkbox-label-font-size: 12px;
	--nut-primary-color: #165dff;
	.nut-form {
		margin-top: 4vh;
	}
}

.nut-form-item .nut-input {
	padding: 8px 0;
}

.login-button {
	height: 35px;
	margin-top: 15px;
	font-size: 14px;
	color: #fff;
	background: #165dff;
	border: 1px solid #034196;
	border-radius: 16px;
}
.visitor-login {
	background: #fff;
	color: #165dff;
}
.register-button-container {
	margin-top: 140px;
	text-align: center;
	color: #606266;
	font-size: 12px;

	span {
		text-decoration-line: underline;
	}
}
</style>
